	{% extends "exam/base.html" %}
	{% load markitup_tags %}
	
	{% load i18n %}
	{% block extra_head_base %}
	
		<link rel="stylesheet" href="{{ STATIC_URL }}exam/css/default.css" />
		<script type="text/javascript" src="{{ STATIC_URL }}exam/javascript/jquery.min.js"></script>
		<script type="text/javascript" src="{{ STATIC_URL }}exam/javascript/time.js"></script>
		<script type="text/javascript" src="{{ STATIC_URL }}exam/javascript/default.js"></script>
		<script type="text/javascript" src="{{ STATIC_URL }}exam/javascript/security.js"></script>
		<script type="text/javascript" src="{{ STATIC_URL }}exam/javascript/js.js"></script>
		<script type="text/javascript" src="{{ STATIC_URL }}exam/javascript/jquery.ndd.js"></script>
		<script type="text/javascript" src="{{ STATIC_URL }}exam/javascript/jquery-1.4.2.js" ></script> 
	
	<script type="text/javascript">
	          $(function(){var allRadios=$("input[type=radio]");var radioChecked;var setCurrent=function(e){var obj=e.target;radioChecked=$(obj).attr("checked");};var setCheck=function(e){if(e.type=="keypress"&&e.charCode!=32){return false;}var obj=e.target;if(radioChecked){$(obj).attr("checked",false);}else{$(obj).attr("checked",true);}};$.each(allRadios,function(i,val){var label=$("label[for="+$(this).attr("id")+"]");$(this).bind("mousedown keydown",function(e){setCurrent(e);});label.bind("mousedown keydown",function(e){e.target=$("#"+$(this).attr("for"));setCurrent(e);});$(this).bind("click",function(e){setCheck(e);});});});
	</script>
	<title>Reading test</title>
	{% endblock %}
	
	{%block body%}
	
	<div id="exa">
	
		<div id="nav">
	<script type="text/javascript">
	product({{count}},3); 
	timeT={{time}};
	exam_id = {{exam_id}}
	test_id = {{test_id}}
	pass_c = {{pass_c}}
	</script>
	
	<div id="buttons">
		<table cellpadding="0" cellspacing="0" border="0">
			<tbody>
				<tr>
					<td id="backtosite"><a href="http://127.0.0.1:8000/exam">Back to toefl.mn</a></td>	
					<td id="review"> <input type="submit"  value="Review"> </td>
					<td id="help">   <input type="submit"  value="Help"> </td>
					<td id="back">   <input type="submit" value="Back"></td>
					<td id="next">   <input type="submit"  value="Next" ></td>
					<td id="finish">   <input type="submit" value="Finish" ></td>
				</tr>
				</tbody></table>
		</div>
	
	</div>
	
		<div id="tBar" style="text-align:center;">
	
	<div id="secTitle">
		<table cellpadding="0" cellspacing="0" border="0">
			<tbody>
				<tr>
				
				<td><input id="timeOff" type="submit" value="Hide Time" ><input id="timeOn" type="submit" value="Show Time" ></td>
				<td id="timeVal">00:19:15</td>
				</tr>
				 
			</tbody>
		</table>
		</div>
	<div id="ttt" >
	<table id="main1" cellpadding="0" cellspacing="0" border="0" width="100%">
		<tbody><tr>
			<td id="lContent">
			
	<p id="feedback"></p>
			
			<div class="allTest">
				{% for test in tests %}	
					{% ifequal test.type 1 %}
					<div id={{test.index}} class="test1">
						{{test.index}}. {{ test.question.raw|safe}}
						<ul class="{{test.index}}">
							<script type="text/javascript"> types[{{test.index}}-1]={{test.type}};ids[{{test.index}}-1]={{test.id}}</script>
							<li>{{test.answer1}} </li>
							<li>{{test.answer2}} </li>
							<li>{{test.answer3}} </li>
							<li>{{test.answer4}} </li>
						</ul>
					</div>
					{%endifequal%}
					{% ifequal test.type 2 %}
					<div id={{test.index}} class="test2">
						{{test.index}}. {{test.question.raw|safe}}
						<ul class="{{test.index}}">
							<script type="text/javascript"> types[{{test.index}}-1]={{test.type}};ids[{{test.index}}-1]={{test.id}}</script>
							<li>{{test.answer1}} </li>
							<li>{{test.answer2}} </li>
							<li>{{test.answer3}} </li>
							<li>{{test.answer4}} </li>
						</ul>
					</div>
					{%endifequal%}
					{% ifequal test.type 3 %}
					<div id={{test.index}} class="test3">
						{{test.index}}. {{test.question.raw|safe}}
						<ul class="{{test.index}}">
							<script type="text/javascript"> types[{{test.index}}-1]={{test.type}};ids[{{test.index}}-1]={{test.id}}</script>
							<li>{{test.answer1}} </li>
							<li>{{test.answer2}} </li>
							<li>{{test.answer3}} </li>
							<li>{{test.answer4}} </li>
							{% if test.answer5 %}
							<li>{{test.answer5 }} </li>
							{%endif%}
							{% if test.answer6 %}
							<li>{{test.answer6 }} </li>
							{%endif%}
							{% if test.answer7 %}
							<li>{{test.answer7 }} </li>
							{%endif%}
							{% if test.answer8 %}
							<li>{{test.answer8 }} </li>
							{%endif%}
							{% if test.answer9 %}
							<li>{{test.answer9}} </li>
							{%endif%}
							{% if test.answer10%}
							<li>{{test.answer10}} </li>
							{%endif%}
						</ul>
					</div>
					{%endifequal%}
					{% ifequal test.type 4 %}
					<div id={{test.index}} class="test4">
						{{test.index}}. {{test.question.raw|safe}}
						<ul class="{{test.index}}">
							<script type="text/javascript"> types[{{test.index}}-1]={{test.type}};ids[{{test.index}}-1]={{test.id}}</script>
							<li>{{test.answer1}} </li>
							<li>{{test.answer2}} </li>
							<li>{{test.answer3}} </li>
							<li>{{test.answer4}} </li>
						</ul>
					</div>
					{%endifequal%}
					{% ifequal test.type 5 %}
					<div id={{test.index}} class="test5">
						{{test.index}}. {{test.question}}
						<ul class="{{test.index}}">
							<script type="text/javascript">categoryQuestion={{test.index}}; cq=true; types[{{test.index}}-1]={{test.type}};ids[{{test.index}}-1]={{test.id}}</script>
							<li id="c1" text="{{test.choice1}}"><div>{{test.choice1}}</div>  <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							<li id="c2" text="{{test.choice2}}"><div>{{test.choice2}}</div>  <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							<li id="c3" text="{{test.choice3}}"><div>{{test.choice3}}</div>  <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							<li id="c4" text="{{test.choice4}}"><div>{{test.choice4}}</div> <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							{% if test.choice5%}
							<li id="c5" text="{{test.choice5}}"><div>{{test.choice5}}</div> <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							{%endif%}
							{% if test.choice6%}
							<li id="c6" text="{{test.choice6}}"><div>{{test.choice6}}</div> <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							{%endif%}
							{% if test.choice7%}
							<li id="c7" text="{{test.choice7}}"><div>{{test.choice7}}</div> <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							{%endif%}
							{% if test.choice8%}
							<li id="c8" text="{{test.choice8}}"><div>{{test.choice8}}</div> <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							{%endif%}
							{% if test.choice9%}
							<li id="c9" text="{{test.choice9}}"><div>{{test.choice9}}</div> <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							{%endif%}
							{% if test.choice10%}
							<li id="c10" text="{{test.choice10}}"><div>{{test.choice10}}</div> <button class="secA">A</button>{% ifequal cat 2 %}<button class="secB">B</button>{%endifequal%}</li>
							{%endif%}
							
						</ul>
					</div>
						
					{%endifequal%}
					{% ifequal test.type 6 %}
					
					<div id={{test.index}} class="test6">
						<ul class="{{test.index}}">
							 <p>{{test.index}}. Look at the four squares [■] that indicate where the following sentence could be added to the passage.</p>
							 <p>{{test.question.raw|safe}}</p>
							<script type="text/javascript"> types[{{test.index}}-1]={{test.type}};ids[{{test.index}}-1]={{test.id}}</script>
						<li> <span >{{test.question}}</span></li>{{test.sectionA.raw|safe}}
							<li> ■ <span >{{test.question.raw|safe}}</span></li>{{test.sectionB.raw|safe}}
							<li> ■ <span >{{test.question.raw|safe}}</span></li>{{test.sectionC.raw|safe}}
							<li> ■ <span >{{test.question.raw|safe}}</span></li>{{test.sectionD.raw|safe}}
							<li> ■ <span >{{test.question.raw|safe}}</span></li>{{test.sectionE.raw|safe}}
						</ul>
					</div>
						
					{%endifequal%}
					
				{% endfor %}
			
				
			</div>
	       
		
					
			</td>
			<td id="rContent">
			
			<div id="sss">
				<div id="title"><i>{{test.title}}</i></div>
			
				<div id="scroll" style="height: 300px; ">
					<div id="scrollInside1">{{ body|safe|linenumbers|linebreaks}} </div>
					<script type="text/javascript"> p_id={{body.id}}</script>
				</div>
				</div>
				<div id="cat">
					<h3>Section A</h3>
					<h4>{{cat1}}</h4>
					<div id="divSecA">
						<ul id="secA" class="catA">
						
						</ul>	
					</div>
					{% ifequal cat 2 %}
					<h3>Section B</h3>
					<h4>{{cat2}}</h4>
					<div id="divSecB">
						
						<ul id="secB" class="catB">
							
						</ul>
					</div>
					{%endifequal%}
				</div>
					
			</td>
		</tr>
	</tbody></table>
	</div>
	<form id="ansForm" name="myForm" action="http://127.0.0.1:8000/exam/xhr_test" method="post">
				<input type="hidden" name="answer" value="1">
				<input type="hidden" name="qid" value="2076">
				<input type="hidden" name="remaining" value="1138">
				<input type="hidden" name="pagenum" value="1">
				<input type="hidden" name="NextAction" value="0">
				<input type="hidden" name="PreviousAction" value="0">
			</form>
			
			</div>
	{%endblock%}
	{% block footer %}
		
	{% endblock %}
	
	
	<!--				-->
	
